@import '@/styles/common/px2rem.scss';
.select{
    width: 85%;
}
.full{
    width: 100%;
}

.search{
    display: flex;
    justify-content: flex-end;
    .mask{
        display: flex;
        flex-direction: column;
    }
    .hide{
        display: none;
        z-index: -1;
    }
    .show{
        display: block;
        z-index: 2;
    }
    .search_head{
        width: 100%;
        display: flex;
        // height: px2rem(60);
        // line-height: px2rem(60);
        padding: px2rem(10) px2rem(3);
        justify-content: center;
        flex-shrink: 0;
        span{
            width: px2rem(40);
            color: #999;
            font-size: px2rem(14);
            align-self: center;
            margin-left: px2rem(5); 
        }
        i.iconfont{
            width: px2rem(20);
            align-self: center;
            margin-right: px2rem(5);
            font-size: px2rem(14);
        }
    }
    .search_input{
        // width: px2rem(261);
        // width: 100%;
        flex: 1;
        justify-self: center;
        height: px2rem(31);
        border-radius: px2rem(15);
        overflow: hidden;
        position: relative;
        input{
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            border: 0;
            padding-left: px2rem(20);
            font-size: px2rem(14);
            position: relative;
            z-index: 1;
        }
        .hover{
            position: absolute;
            top: 0;
            left: px2rem(30);
        }
    }
    .search_list{
        flex: 1;
        overflow-y: auto;
        &::before{
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            background-color: #eee;
            transform: scale(1, .5);
        }
        li{
            height: px2rem(44);
            &::after{
                content: "";
                display: block;
                width: 100%;
                height: 1px;
                background-color: #eee;
                transform: scale(1, .5);
            }
            a{    
                display: flex;
                align-items: center;
                width: 100%;
                height: 100%;
                color: #333;
                font-size: px2rem(16);
                i{
                    display: inline-block;
                    width: px2rem(20);
                    margin: 0 px2rem(10);
                }
                span{
                    flex: 1;
                    display: inline-block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}